<template>
  <div class="data-source">
    <!-- 搜索1 -->
    <el-row class="search-top">
      <el-col :span="16">
        <SvgIcon icon="about" />
        <el-button type="primary" size="small" @click="setDataType()">新建数据源</el-button>
        <el-button size="small" @click="batchDeletion()">批量删除</el-button>
      </el-col>
      <el-col :span="8">
        <el-input v-model="search_source" placeholder="请输入内容" class="input-search" size="small" clearable>
          <el-button slot="append" type="primary" icon="el-icon-search" @click="query(1)"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <!-- 搜索2 -->
    <el-form :inline="true" :model="queryObj" size="small" label-width="110px" class="search-top">
      <el-form-item label="业务编号：">
        <el-input v-model.trim="queryObj.applNo" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="申请日期：">
        <el-date-picker v-model.trim="applyTimeArray" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
          :picker-options="pickerOptions" @blur="timePicker"></el-date-picker>
      </el-form-item>
      <el-form-item label="案件状态：">
        <el-select v-model="queryObj.state" placeholder="请选择案件状态">
          <el-option v-for="item of caseState" :key="item.state" :label="item.stateDesc" :value="item.state"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格demo -->
    <el-table v-loading="vloading" :data="listData" :header-cell-style="{'background-color': vScss.tableHeaderColor}" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" align="center" width="70" label="序号"></el-table-column>
      <el-table-column prop="d_name" align="center" label="名称"></el-table-column>
      <el-table-column prop="type" align="center" label="数据库类型"></el-table-column>
      <el-table-column prop="host" align="center" label="主机"></el-table-column>
      <el-table-column prop="d_name" align="center" label="数据库名"></el-table-column>
      <el-table-column prop="d_username" align="center" label="用户名"></el-table-column>
      <el-table-column prop="date_created" align="center" width="150" sortable label="创建时间"></el-table-column>
      <el-table-column prop="is_visible" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <div class="table-icon-setting">
            <el-tooltip class="item" effect="dark" content="设置" placement="top">
              <el-button type="text" @click="setDataType(scope.row)">
                <i class="el-icon-setting"></i>
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="text" @click="batchDeletion(scope.row)">
                <i class="el-icon-delete"></i>
              </el-button>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页demo -->
    <el-pagination background :page-size.sync="page_size" layout="prev, pager, next" :total="total" :current-page="page_no" small @current-change="query">
    </el-pagination>
    <el-dialog :visible.sync="setVisible" width="560px" class="data-source-edit" :close-on-click-modal="false">
      <div slot="title">数据源管理</div>
      <el-form ref="ruleForm" label-width="120px" :model="ruleForm" :rules="rules">
        <el-form-item label="名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="数据库类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择数据库类型">
            <el-option v-for="item of sourceDatabase" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主机" prop="host">
          <el-input v-model="ruleForm.host"></el-input>
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input v-model="ruleForm.port"></el-input>
        </el-form-item>
        <el-form-item label="数据库名" prop="d_name">
          <el-input v-model="ruleForm.d_name"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="d_username">
          <el-input v-model="ruleForm.d_username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="d_password">
          <el-input v-model="ruleForm.d_password" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vScss from "@/assets/scss/export-style.scss";
export default {
  data() {
    return {
      vScss,
      listData: [],
      multipleSelection: [],
      sourceDatabase: [],
      vloading: false,
      page_size: 10,
      page_no: 1,
      total: 0,
      setVisible: false,
      search_source: "",
      queryObj: {
        applNo: "",
        idNo: "",
        mobileNo: "",
        state: "",
        custNo: "",
        dateDraw: "",
        dateFinished: "",
        pageSize: 10,
        pageNo: 1,
      },
      applyTimeArray: [],
      count: 0,
      caseState: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      ruleForm: {
        id: "",
        title: "",
        type: "",
        host: "",
        port: "",
        d_name: "",
        d_username: "",
        d_password: "",
      },
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
        host: [{ required: true, message: "请输入主机地址", trigger: "blur" }],
        port: [
          { required: true, message: "请输入端口", trigger: "blur" },
          { pattern: /^\d+$/, message: "请输入正确的端口" },
        ],
        d_name: [
          { required: true, message: "请输入数据库名", trigger: "blur" },
        ],
        d_username: [
          { required: true, message: "请输入数据库用户名", trigger: "blur" },
        ],
        d_password: [
          { required: true, message: "请输入数据库密码", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    async query(data) {
      this.page_no = data;
      this.vloading = true;
      const ops = { page_size: 10, page_no: this.page_no };
      if (this.search_source) {
        Object.assign(ops, { text: this.search_source });
      }
      this.vloading = false;
    },
    batchDeletion(data) {
      const ids = [];
      if (data) {
        ids.push(data.id);
      } else {
        this.multipleSelection.forEach((item) => {
          ids.push(item.id);
        });
        if (ids.length === 0) return;
      }
      this.$confirm("是否删除文件", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
      })
        .then(() => {
          this.$message.success("删除成功!");
          // this.$api
          //   .dataSourceDelete({ ids })
          //   .then(() => {
          //     this.$message.success("删除成功!");
          //     this.init();
          //   })
          //   .catch(() => {
          //     this.$message.error("删除失败!");
          //   });
        })
        .catch(() => {});
    },
    setDataType(data) {
      this.setVisible = !this.setVisible;
      if (data) {
        this.ruleForm = JSON.parse(JSON.stringify(data));
      } else {
        this.ruleForm = {
          id: "", //主键
          title: "", //名称
          type: "", //类型
          host: "", //地址
          port: "", //端口
          d_name: "", //库名
          d_username: "",
          d_password: "",
        };
      }
    },
    submitForm(formName) {
      console.log(this.ruleForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api
            .dataSourceEdit(this.ruleForm)
            .then(() => {
              this.$message.success("提交成功!");
              this.setVisible = false;
              this.query();
            })
            .catch((err) => {
              this.$message.error(err.msg);
            });
        }
      });
    },
    resetForm(formName) {
      this.setVisible = !this.setVisible;
      this.$refs[formName].resetFields();
    },
    handleSelectionChange(data) {
      this.multipleSelection = data;
    },
    timePicker() {
      const applyTime = this.applyTimeArray;
      if (applyTime[1] - applyTime[0] > 777601000) {
        this.$message.error("日期选择范围不能超过10天");
        this.applyTimeArray = [];
      }
    },
  },
};
</script>

<style lang="scss">
.search-top {
  background: #fff;
  padding: 10px;
}
.el-pagination {
  margin-top: 10px;
  text-align: right;
}
</style>